<template>
  <div class="main_content AddOrEditPersonal">
    <father-title :title="fatherTitle"></father-title>
    <div class="contentBox">
      <!-- <header-line :title="headerTitle"></header-line> -->
      <div class="middleBox">
        <search-box @clickSearch="search">
          <template slot="left">
            <Input
              v-model="searchParams.parking_name"
              placeholder="标题"
              clearable
            ></Input>
            
          </template>

          <template slot="right">
            <Button
              v-if="$store.state.perms.includes('sys:schedule:save')"
              type="primary"
              @click="addData"
              >添加</Button
            >
          </template>
        </search-box>
        <v-table
          :loading="pageConfig.loading"
          ref="selection"
          border
          :columns="columns"
          :data="list"
        >
          <template slot-scope="{ row }" slot="hoursCost">
            <span>{{ row.hoursCost }}元/小时</span>
          </template>
          <template slot-scope="{ row }" slot="status">
            <span :class="{'red':row.status==0,'green':row.status==1}">{{
              status.find((item) => item.value === row.status).key
            }}</span>
            <span
              class="circle"
              :class="{ red: row.status == 0, green: row.status == 1 }"
            ></span>
          </template>
          <template slot-scope="{ row }" slot="totalAmount">
            <div>
              <span>车位数：</span><span>{{ row.totalAmount }}</span>
            </div>
            <div>
              <span class="red">预约：</span
              ><span class="red">{{ row.useAmount }}</span>
            </div>
            <div>
              <span class="green">剩余：</span
              ><span class="green">{{ row.inIdleAmount }}</span>
            </div>
          </template>
          <template slot-scope="{ row }" slot="operation">
            <Button
              v-if="$store.state.perms.includes('sys:role:update')"
              type="primary"
              size="small"
              @click="editData(row)"
              >编辑</Button
            >
            <Button
              v-if="
                $store.state.perms.includes('sys:role:delete') &&
                  row.status == 1
              "
              class="button_spacing"
              type="error"
              size="small"
              @click="stopUse(row)"
              >停用</Button
            >
            <Button
              v-if="
                $store.state.perms.includes('sys:role:delete') &&
                  row.status == 0
              "
              class="button_spacing"
              type="error"
              size="small"
              @click="beginUse(row)"
              >启用</Button
            >
          </template>
        </v-table>
        <v-page :pageConfig="pageConfig" @refresh="getList"></v-page>
      </div>

      <AddOrEditModal
        v-model="modalCTL.show"
        :title="modalCTL.title"
        :loading="modalCTL.loading"
        width="50%"
        @on-ok="save"
      >
        <Form
          ref="form"
          :model="formValidate"
          :rules="ruleValidate"
          label-position="left"
          :label-width="100"
          slot="content"
        >
          <FormItem label="标题" prop="newPassword">
            <Input
              type="text"
              v-model="formValidate.newPassword"
              placeholder="请输入标题"
            />
          </FormItem>
          <FormItem label="内容" prop="confirmPassword">
            <Input
              type="textarea"
              v-model="formValidate.confirmPassword"
              placeholder="请输入内容"
            />
           
          </FormItem>
          
        </Form>
      </AddOrEditModal>
    </div>
  </div>
</template>

<script>
import {
  columns,
  pageConfig,
  formValidate,
  ruleValidate,
  status,
} from "./pageConfig";
export default {
  name: "ParkingLot",

  data() {
    return {
      fatherTitle: "帮助中心",
      modalCTL: {
        show: false,
        loading: true,
        title: "新增",
      },
      columns,
      pageConfig,
      formValidate: { ...formValidate },
      ruleValidate,
      status,
      list: [],
      searchParams: {
        parking_name: "",
        address: "",
      },
      // search
    };
  },

  mounted() {
    this.getList(this.pageConfig);
    // var center = new TMap.LatLng(39.98412, 116.307484);
    //定义map变量，调用 TMap.Map() 构造函数创建地图
    // var map = new TMap.Map(document.getElementById("tencentMap"), {
    //   center: center, //设置地图中心点坐标
    //   zoom: 17.2, //设置地图缩放级别
    //   pitch: 43.5, //设置俯仰角
    //   rotation: 45, //设置地图旋转角度
    // });
  },

  computed: {},

  methods: {
    search() {},
    addData() {
      this.modalCTL.show = true;
    },
    editData(row) {},
    stopUse(row) {
      this.$Modal.confirm({
        title: "提示",
        content: "确认停用该停车位吗？",
        onOk: () => {
          // this.$Message.info('Clicked ok');
          this.$api
            .post("sp/own/parking/stop", {
              id: row.id,
            })
            .then((res) => {
              console.log(res.data.msg);
              this.$Message["success"]({
                background: true,
                content: res.data.msg,
              });
            });
        },
        onCancel: () => {
          // this.$Message.info('Clicked cancel');
        },
      });
    },
    beginUse(row) {},
    save() {},
    getList(page) {
      this.pageConfig.loading = true;
      this.$api
        .post("sp/own/parking/queryPage", {
          params: {
            page: page.pageNow,
            limit: page.pageSize,
            ...this.searchParams,
          },
        })
        .then((res) => {
          if (res.data.code === 0) {
            this.list = res.data.page.list;
            this.pageConfig.total = res.data.page.totalCount;
          }
        })
        .finally(() => {
          this.pageConfig.loading = false;
        });
    },
  },
};
</script>

<style scoped lang="less">
.circle {
  width: 8px;
  height: 8px;
  display: inline-block;
  background: green;
  border-radius: 50%;
  margin-left: 5px;
}
.flexOut {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  /deep/ .ivu-form-item-content {
    display: flex;
    margin-left: 0 !important;

    span {
      width: 50px;
      flex-shrink: 0;
      display: inline-block;
      margin-left: 10px !important;
    }
    .icons {
      margin-right: 10px;
    }
  }
}

.AddOrEditPersonal {
  .contentBox {
    overflow-y: scroll;
  }
  .form {
    display: flex;
    flex-direction: column;
    width: 800px;
    padding: 20px;
    flex: 1;
  }
}
.red {
  color: red;
}
.green {
  color: green;
}
</style>
